<template>
  <div class="product-item" @click="goDetail">
    <img :src="image || require('assets/images/nopic.jpg')" alt="" class="pic">
    <div class="name transition">{{ name }}</div>

    <div class="price-and-collect">
      <div class="price"><span class="keywords">￥{{ price || 0 }} /Pc</span>起</div>
      <div class="collect" @click.prevent.stop="collect(productId)">
        <img src="~/assets/images/collectA.png" alt="" class="collect" v-if="thisCollect">
        <img src="~/assets/images/collect-grey.png" alt="" class="collect" v-else>
      </div>
    </div>
    
    <div class="storage-and-cart">
      <div class="storage"><span class="keywords">{{ storage || 0 }} Pcs</span>MOQ</div>
      <img src="~/assets/images/cart-grey.png" alt="" class="cart" @click.prevent.stop="cart(productId)">
    </div>
  </div>
</template>

<script>
import { collectPro, addCart } from '@/request/api'

export default {
  name: 'ProductItem',
  props: {
    name: String,
    price: String,
    storage: {
      type: Number,
      default: 0
    },
    image: String,
    productId: '',
    type: '',
    isCollect: 0
  },
  data() {
    return {
      thisCollect: ''
    }
  },
  created() {
    this.thisCollect = this.isCollect
  },
  methods: {
    goDetail() {
      //1材料2服务
      /* if (this.type == 1) {
        this.$router.push({ name: 'CateProduct', params: { id: this.productId } })
      } else {
        this.$router.push({ name: 'ServiceProduct', params: { id: this.productId } })
      } */
    },
    // 收藏
    collect(id) {
      let that = this
      this.thisCollect = !this.thisCollect
      if (!this.$store.state.access_token) {
        this.$router.push({ name: 'Login' })
      } else {
        const data = {
          type_id: id,
          type: 1
        }
        collectPro(data).then(res => {
          if (res.status === 200) {
            that.$toastVant.success(res.message)
          }
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    },
    // 加入购物车
    cart(id) {
      if (!this.$store.state.access_token) {
        this.$router.push({ name: 'Login' })
      } else {
        const data = {
          cart_num: 1,
          is_new: 0,
          product_id: id,
          product_type: 0
        }
        addCart(data).then(res => {
          if (res.status !== 200) return this.$message.error(res.message)
          this.$toastVant.success('加入成功！')
        }).catch(err => {
          this.$message.error(err.message)
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.product-item {
  padding: 10px;
  background-color: #fff;
  width: 100%;
  display: inline-block;
  cursor: pointer;
  font-size: 15px;
  line-height: 20px;

  &:hover {
    .name {
      color: $theme-color-1;
    }
  }

  .pic {
    width: 155px;
    height: 155px;
    text-align: center;
    object-fit: cover;
    margin-bottom: 5px;
  }

  .name {
    @include text-omitted(2);
    margin-bottom: 10px;
    height: 40px;
  }

  .price-and-collect {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 16px;

    .price {
      color: #969696;
      font-size: 14px;

      .keywords {
        color: $theme-color-1;
        font-weight: bold;
        margin-right: 5px;
        font-size: 16px;
      }
    }

    .collect {
      width: 19px;
      height: 17px;
    }
  }

  .storage-and-cart {
    display: flex;
    justify-content: space-between;
    font-size: 14px;

    .storage {
      font-size: 12px;
      color: #969696;

      .keywords {
        color: $theme-color-1;
        font-weight: bold;
        margin-right: 5px;
        font-size: 16px;
      }
    }

    .cart {
      width: 21px;
      height: 17px;
    }
  }
}
</style>
